<template>
	<view class="banner">
		<canvas canvas-id="banner" style="width: 90%;height:900rpx;"></canvas>

		<button class="btn_save" @click="onSave">保存至相册</button>
	</view>
</template>

<script>
import config from '@/config';
export default {
	data() {
		return {
			goods: {},
			userInfo: {},
			imageUrl: config.imageUrl
		};
	},
	onLoad(options) {
		uni.getImageInfo({
			src: '../../static/qrcode.jpg',
			complete(c) {
				console.log('cccc', c);
			}
		});
		// this.goods = JSON.parse(options.goods);
		this.goods = uni.getStorageSync('goods');
		this.userInfo = uni.getStorageSync('userInfo');
		this.draw();
	},
	methods: {
		onSave() {
			const banner = uni.createCanvasContext('banner');
			banner.draw(true, () => {
				uni.canvasToTempFilePath({
					canvasId: 'banner',
					x: 0,
					y: 0,
					destWidth: 375,
					destHeight: 450,
					success: toRes => {
						uni.saveImageToPhotosAlbum({
							filePath: toRes.tempFilePath,
							complete: c => {
								console.log('c', c);
							}
						});
					}
				});
			});
		},
		draw() {
			console.log(this.userInfo.avatarUrl);
			const banner = uni.createCanvasContext('banner');
			// uni.showLoading({
			// 	mask:true,
			// })
			uni.getImageInfo({
				src: this.userInfo.avatarUrl,
				success: res => {
					banner.drawImage(res.path, 40, 30, 40, 40);
					banner.setFontSize(17);
					banner.fillStyle = '#515151';
					banner.fillText(this.userInfo.nickName, 90, 60);

					banner.beginPath();
					uni.getImageInfo({
						src: this.imageUrl + this.goods.picturePath,
						success: goodsImageRes => {
							console.log('goodsres', goodsImageRes);
							const imgHeight = Math.round(295 / (goodsImageRes.width / goodsImageRes.height));
							console.log('height', imgHeight);
							banner.drawImage(goodsImageRes.path, 40, 90, 295, 185);
							banner.font = 'normal bold 18px Arial';
							banner.fillText(this.goods.name, 40, 115 + 185);

							// banner.beginPath();
							banner.font = 'normal 100 14px Arial';
							banner.fillStyle = '#f56c6c';
							banner.fillText('限时促销', 40, 140 + 185);

							banner.font = 'normal 100 14px Arial';
							banner.fillStyle = '#f56c6c';
							banner.fillText('￥', 40, 168 + 185);

							banner.font = 'normal bold 20px Arial';
							banner.fillStyle = '#f56c6c';
							banner.fillText(this.goods.goodsPrice, 53, 168 + 185);

							banner.font = 'normal 100 14px Arial';
							banner.fillStyle = '#8a8a8a';
							banner.fillText('原价 ￥' + this.goods.goodsPrice, 40, 190 + 185);

							banner.fillRect(40, 185 + 185, 35 + JSON.stringify(this.goods.goodsPrice).length * 14, 1);

							banner.font = 'normal 100 14px Arial';
							banner.fillStyle = '#515151';
							banner.fillText('长安或扫码可直接购买', 40, 220 + 185);
							banner.fillText('优选商品 服务到家', 40, 240 + 185);

							banner.drawImage('../../static/qrcode.jpg', 250, 185 + 150, 100, 100);

							banner.draw();
							uni.hideLoading();
						}
					});
				},
				complete: c => {
					console.log(111111111, c);
				}
			});
		}
	}
};
</script>

<style>
.btn_save {
	width: 600rpx;
	height: 90rpx;
	background-color: #e51c23;
	margin: 30rpx auto;
	color: #fff;
	border-radius: 10rpx;
}
</style>
